<template>
  <div id="mobile-page">
    <div class="mobile-content" :style="{height:isHavesafeArea?'calc(100vh - 5.25rem)':'calc(100vh - 4rem)'}">
      <router-view></router-view>
    </div>
    <mobileTabbar></mobileTabbar>
  </div>
</template>

<script>
import mobileTabbar from './mobileTabbar.vue';
export default {
  components:{mobileTabbar},
  data() {
    return {
      isHavesafeArea:false,
      userAgent:''
    };
  },
  created() {

  },
  mounted() {
    document.documentElement.style.fontSize = (document.documentElement.clientWidth/24.375).toFixed(2)+'px'
    this.userAgent  = navigator.userAgent
    let isiOS = !!this.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if(isiOS && this.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
      this.isHavesafeArea = true
    }else{
      this.isHavesafeArea = false
    }
  },
  methods: {

  }
};
</script>

<style scoped lang="scss">
.mobile-content{
  height: calc(100vh - 4rem);
  position: relative;
}
</style>
